<template>
  <v-container fluid fill-height class="statistics-wrapper">
    <v-layout row wrap>
      <v-flex md2 class="mb-3">
        <v-btn round dark color="light-blue" href="http://c-c.jiahuagame.com/lefantian-console/Excel/importExcel.xlsx">
          <v-icon>cloud_download</v-icon>
          <span class="ml-2">导出excel文件</span>
        </v-btn>
      </v-flex>
      <v-flex md12>
        <!-- 查询数据表格 -->
        <v-data-table hide-actions :loading="showProgress" :headers="headers" :items="tableData" class="elevation-1">
          <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
            <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
            <td class="text-xs-center subheading">{{ props.item.realName }}</td>
            <td class="text-xs-center subheading">{{ props.item.telphone }}</td>
            <td class="text-xs-center subheading">{{ props.item.bankName }}</td>
            <td class="text-xs-center subheading">{{ props.item.bankCard }}</td>
            <td class="text-xs-center subheading">{{ props.item.directAmount }}</td>
            <td class="text-xs-center subheading">{{ props.item.lowerAmount }}</td>
            <td class="text-xs-center subheading">{{ props.item.twoAmount }}</td>
            <td class="text-xs-center subheading">{{ props.item.totalAmount }}</td>
          </template>
          <!-- 没有数据时显示的提示 -->
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>
        </v-data-table>
        <!-- 表格分页 -->
        <div class="text-xs-center my-2">
          <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
        </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as agent from "../../api/agent";
export default {
  data: () => ({
    tabs: null,
    showProgress: false,
    limit: 12,
    offset: 0,
    dialog: false,
    allowEdit: true,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    tableData: [],
    formTitle: "代理资料",
    headers: [
      { text: "代理ID", value: "lftid", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "姓名", value: "realName", align: "center", sortable: false },
      { text: "电话", value: "telphone", align: "center", sortable: false },
      { text: "开户行", value: "bankName", align: "center", sortable: false },
      { text: "银行卡", value: "bankCard", align: "center", sortable: false },
      {
        text: "直接收益",
        value: "directAmount",
        align: "center",
        sortable: false
      },
      {
        text: "下级收益",
        value: "lowerAmount",
        align: "center",
        sortable: false
      },
      {
        text: "间二级收益",
        value: "twoAmount",
        align: "center",
        sortable: false
      },
      { text: "总收益", value: "totalAmount", align: "center", sortable: false }
    ],
    tableData: [],
  }),
  mounted() {
    this.getAgentWage();
    // 获取到对应的游戏类型
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.getAgentWage();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.getAgentWage();
      });
    });
  },
  watch: {
    // 监测路由参数变化
    '$route'(to, from) {
      console.log(to.params.gametype);
    }
  },
  methods: {
    getAgentWage() {
      let params = {
        offset: this.offset,
        limit: this.limit
      };
      this.showProgress = true;
      agent.getAgentWage.r(params).then(({ data }) => {
        let d = data.data;
        if (d) {
          this.tableData = d.dataList[0].salary;
          this.pagination.pageCount = d.totalCount
            ? Math.ceil(d.totalCount / this.limit)
            : 1;
        } else {
         $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        }
        this.showProgress = false;
      });
    },
    initialize() {
      this.tableData = [
        {
          saleLevel: "Frozen Yogurt",
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 6.0,
          nickname: "搭街坊",
          telephone: "1875854669",
          superId: 123000,
          saleLevel: 1,
          sales: 888,
          proxyLevel: 1,
          createTime: "2018-4-19",
          totalSale: 3655
        },
        {
          saleLevel: "Ice cream sandwich",
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 9.0,
          nickname: "贾斯丁",
          telephone: "18861544141",
          superId: 100010,
          saleLevel: 1,
          sales: 502,
          proxyLevel: 2,
          createTime: "2018-4-19",
          totalSale: 4654
        }
      ];
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      this.getAgentWage();
    }
  }
};
</script>

<style lang="less" scoped>
</style>


